<template>
    <div>
        <el-backtop :bottom="60">
            <el-button icon="el-icon-top" circle></el-button>
        </el-backtop>

        <Head></Head>
        <!--<el-main>-->
            <!--<keep-alive>-->
                <!--<router-view/>-->
            <!--</keep-alive>-->
        <!--</el-main>-->
        <!--<Foot></Foot>-->
    </div>
</template>

<script type="text/javascript">

    import Tag from '../public/tag.vue'
    import Rank from '../public/rank.vue'
    import {CON} from '../../config/config.js'

    export default {
        name: 'home',
        data() {
            return {
                content: [],
                list: [],
                page: {
                    lastPage: 0,
                    currentPage: 1,
                    isBottom: false,
                    bottomTitle: ''
                },
                count: 10

            }
        },
        metaInfo: {
            title: '橙汁社区',
            meta: [
                {
                    name: 'description',
                    content: '个人日记文档',
                },
                {
                    name: 'keywords',
                    content: '博客，生活'
                }
            ]
        },
        created() {

            // window.onscroll=()=>{
            //     // 变量scrollTop是滚动条滚动时，距离顶部的距离
            //     let scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            //     // 变量windowHeight是可视区的高度
            //      windowHeight = document.documentElement.clientHeight || document.body.clientHeight,
            //     // 变量scrollHeight是滚动条的总高度
            //      scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //     let h=scrollTop+windowHeight;
            //     (h==scrollHeight)?(()=>{
            //         this.page.isBottom=true;
            //         this.page.bottomTitle="拼命加载中...";
            //         this.getAritle();
            //
            //
            //     })():(()=>{
            //
            //
            //     })();
            // }
            this.getAritle()
        },

        mounted() {
            // this.$nextTick(function () {
            //     window.addEventListener('scroll', this.handleScroll, true)
            // });

        },
        methods: {
            load() {
                console.log('加载')
            },

            backTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0

            },
            /**
             * 时间格式转换
             */
            changeTime(time) {

                return CON.changeTime(time)
            },

            demo() {

                this.$router.push({name: 'login'})

            },
            /**
             * 下一页
             * */
            nextPage() {
                this.page.currentPage++
                this.getAritle()
            },
            /**
             * 指定页数
             * */
            appiontPage(index) {
                this.page.currentPage = index + 1
                this.getAritle()
            },
            /**
             * 跳转
             * */
            jumpTo(index) {
                console.log('id', this.content[index].id)
                let id = window.btoa(this.content[index].id)
                console.log('id' + id)
                this.$router.push({path: '/content', query: {id: id}})
            },

            /**
             *
             */
            getAritle() {
                // this.$request.request('getAritle', 'get', {
                //   page: this.page.currentPage,
                //   num: 10,
                //   keywords: '',
                //   catid: '',
                //
                // }).then(res => {
                //
                //   if (this.page.currentPage == 1) {
                //     this.content = []
                //   }
                //   this.content = this.content.concat(res.data.data)
                //   this.$forceUpdate()
                //   this.page.currentPage++
                // })

            }

        }
    }
</script>

<style scoped>
    /* 大数据管理系统 */
    #bigData {
        padding: 100px;
        transition: all ease 0.6s;
        box-sizing: border-box;
    }

    #bigData .bigData-title {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    #bigData p {
        font-size: 14px;
        color: #333;
        line-height: 2rem;
    }

    #bigData .bigData-device {
        margin: 50px 0 20px;
    }

    /* 您身边的IT专家 */
    #contactUs {
        color: #fff;
        height: 400px;
        background: url("../../assets/img/contact_us_bg.jpg") 0 0 no-repeat;
        background-size: 100% 100%;
        transition: all ease 0.6s;
    }

    #contactUs .contactUs-container {
        padding-top: 50px;
    }

    #contactUs .contactUs-container button {
        width: 300px;
        height: 50px;
        margin-top: 40px;
    }

    #contactUs .contactUs-container .contactUs-contactWay span {
        display: inline-block;
        width: 48px;
        height: 48px;
        margin: 30px;
    }

    #contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
        background: url("../../assets/img/weixin.png") 0 0 no-repeat;
        background-size: 100% 100%;
    }

    #contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
        background: url("../../assets/img/weibo.png") 0 0 no-repeat;
        background-size: 100% 100%;
    }

    #contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
        background: url("../../assets/img/twitter.png") 0 0 no-repeat;
        background-size: 100% 100%;
    }

    /* 客户评价 */
    #customer {
        padding: 50px 0;
        box-sizing: border-box;
        background: #efefef;
        transition: all ease 0.6s;
    }

    #customer .customer-title {
        font-size: 30px;
        color: rgb(102, 102, 102);
        margin: 0 0 30px;
    }

    #customer .customer-block {
        background: #fff;
        padding: 30px;
    }

    #customer .customer-logo img {
        width: 94px;
        height: 94px;
        border: 1px solid #ccc;
    }

    #customer .customer-yh img {
        width: 34px;
        height: 34px;
    }

    #customer .customer-content1 {
        padding-bottom: 20px;
        border-bottom: 1px solid #0ce9f1;
    }

    #customer .customer-content2 {
        padding-top: 20px;
    }

    /* 为什么选择我们 */
    #whyChooseUs {
        padding: 100px;
    }

    #whyChooseUs .whyChooseUs-title {
        margin-bottom: 50px;
    }

    #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
        font-size: 25px;
        font-weight: 500;
    }

    #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
        font-size: 14px;
    }

    #whyChooseUs .server-block {
        padding: 50px 20px;
        border: 1px solid #ccc;
        border-bottom: 5px solid #ccc;
    }

    #whyChooseUs .server-block img {
        width: 48px;
        height: 48px;
    }

    #whyChooseUs .server-block > p {
        font-size: 20px;
        margin: 30px 0;
    }

    #whyChooseUs .server-block > div {
        color: #ccc;
    }

    /* 媒体查询（手机） */
    @media screen and (max-width: 768px) {
        #swiper {
            height: 200px;
        }

        #bigData {
            padding: 30px;
        }

        #bigData .bigData-title {
            font-size: 20px;
        }

        #bigData .bigData-device {
            font-size: 20px;
            margin: 10px 0 10px;
        }

        #contactUs {
            height: 200px;
            transition: all ease 0.6s;
        }

        #contactUs .contactUs-container {
            padding-top: 0;
        }

        #contactUs .contactUs-container h1 {
            font-size: 25px;
        }

        #contactUs .contactUs-container h3 {
            font-size: 18px;
        }

        #contactUs .contactUs-container button {
            width: 200px;
            height: 30px;
            margin-top: 20px;
        }

        #contactUs .contactUs-container .contactUs-contactWay span {
            display: inline-block;
            width: 28px;
            height: 28px;
            margin: 10px;
        }

        #customer {
            padding: 30px 0;
            box-sizing: border-box;
            background: #fff;
        }

        #customer .customer-title {
            font-size: 16px;
            font-weight: bold;
        }

        #customer .customer-logo img {
            width: 48px;
            height: 48px;
        }

        #customer .customer-block {
            padding: 30px;
        }

        #customer .customer-block > div {
            padding: 30px 0;
        }

        #whyChooseUs {
            padding: 20px 0;
            transition: all ease 0.6s;
        }

        #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
            font-size: 20px;
            font-weight: 700;
        }

        #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
            font-size: 12px;
        }

        #whyChooseUs .server-block {
            padding: 50px 0;
            border: 1px solid #ccc;
            border-bottom: 5px solid #ccc;
        }

        #whyChooseUs .server-block img {
            width: 48px;
            height: 48px;
        }

        #whyChooseUs .server-block > p {
            font-size: 20px;
            margin: 30px 0;
        }

        #whyChooseUs .server-block > div {
            color: #ccc;
        }
    }

    /* 媒体查询（平板） */
    @media screen and (min-width: 768px) and (max-width: 996px) {
        #swiper {
            height: 400px;
        }

        #bigData {
            padding: 60px;
        }

        #bigData .bigData-title {
            font-size: 30px;
        }

        #bigData .bigData-device {
            font-size: 30px;
            margin: 30px 0 15px;
        }

        #contactUs {
            height: 300px;
        }

        #contactUs .contactUs-container {
            padding-top: 50px;
        }

        #contactUs .contactUs-container h1 {
            font-size: 30px;
        }

        #contactUs .contactUs-container h3 {
            font-size: 20px;
        }

        #contactUs .contactUs-container button {
            width: 300px;
            height: 50px;
            margin-top: 30px;
        }

        #contactUs .contactUs-container .contactUs-contactWay span {
            display: inline-block;
            width: 32px;
            height: 32px;
            margin: 15px;
        }

        #customer .customer-title {
            font-size: 24px;
        }

        #whyChooseUs {
            padding: 20px 0;
        }
    }

</style>
